<template>
    <div class="w_h_100">
       

        <div class="mytable m_t_16 ">
            <div class="inlet">系统管理 > 流程管理 > 小表单管理 ><span class="size">编辑表单</span></div>
            <div class="button">
                <el-button type="primary" @click="saveForm">保存</el-button>
                <el-button @click="back">取消</el-button>
            </div>
            <myform :fields="fields" ref="ruleFrom" :model="values" :inline="true" :rules="rules" class="m_t_16">
            </myform>
            <div class="d_f j_c_s_b a_i_c">
                <h4>字段类型列表</h4>
                <div>
                    <el-button type="primary" :icon="Plus" @click="addField">新增字段</el-button>
                    <!-- <el-button type="primary" :icon="View" @click="detail">查看表单</el-button> -->
                </div>
            </div>
            <mytable :fields="tableFields" :defaultList="tableRecords" :isPaginationShow="false"
                width="100" ref="tableRef" :values="{}" class="m_t_16" :isSelection="false">
                <template v-slot:operation="{ row, $index }">
                    <div class="d_f j_c_s_b">
                        <span class="edit" @click="edit(row, $index)" v-if="row.isEdit">编辑</span>
                        <span class="error" @click="deleteOut(row, $index)"  v-if="row.isEdit">删除</span>
                    </div>
                </template>
            </mytable>
        </div>
        <el-drawer v-model="show" :title="title" size="500px" direction="rtl" :before-close="handleClose">
            <div class="childForm">
                <myform :fields="addFields" @handleSelect="handleSelect" ref="addruleFrom" :model="model"
                    :inline="false" labelPosition="top" :options="options" :rules="rules" class="m_t_16"></myform>
               
            </div>
            <div class="d_f j_c_c">
                    <el-button type="primary" @click="save">保存</el-button>
                    <el-button @click="handleClose">取消</el-button>
                </div>
        </el-drawer>
        <el-drawer v-model="detailShow" title="详情" size="720px" direction="rtl" :before-close="detailHandleClose">
            <div class="detailForm">
                <myform :fields="values.formStruct.formFields" ref="detailRuleFrom" :model="values.formStruct.formModel"
                    :inline="true" :options="options" :rules="values.formStruct.formRules" class="m_t_16"></myform>
            </div>
        </el-drawer>
    </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRefs, onMounted, ref } from 'vue'
import { copy } from '../../../../utils/date'
import { Search, Plus, View } from '@element-plus/icons-vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessageBox } from 'element-plus'
import { dictDetail, listByParentArr } from '../../../../api/login'
import { formMod, formGet,fieldList } from '../../../../api/system/flowPath'
import { flowPathChildFormAddType } from '../../../../type/system'
import { Message } from '../../../../utils/resetMessage'
import {ENGLISH_REG} from '../../../../utils/regular'
const model = {
    label: '',
    type: '',
    prop: '',
    placeholder: '',
    unit: '',
    message: '',
    sort: 1,
    id:'',
    isEdit:true
}
const values = {
    name: '',
    status: '1',
    id: 0,
    category: 1,
    subTitle: '',
    tagName:'',
    bindName:'',
    formStruct: {
        formFields: [],
        formModel: {},
        formRules: {},
    }
}
export default defineComponent({
    name: '',
    setup() {
        const data: flowPathChildFormAddType = reactive({
            fields: [
                {
                    label: "小表单名称",
                    prop: 'name',
                    placeholder: '请输入',
                    type: 'input',
                    labelWidth: '100px'
                },
                {
                    prop: "status",
                    type: 'switch',
                    active: '1',
                    inactive: '0'
                },
                {
                    label: "字段节点名称",
                    prop: 'subTitle',
                    placeholder: '请输入',
                    type: 'input',
                    labelWidth: '100px',
                    disabled: false,
                },
                {
                    label: "表单绑定值",
                    prop: 'bindName',
                    placeholder: '请输入',
                    type: 'input',
                    labelWidth: '100px',
                    disabled: false,
                },
                {
                    label: "备注",
                    prop: 'tagName',
                    placeholder: '请输入',
                    type: 'input',
                    labelWidth: '100px',
                    disabled: false,
                },
            ],
            values: copy(values),
            tableFields: [
                {
                    label: '表单域类型',
                    prop: 'type',
                },
                {
                    label: '字段名称',
                    prop: 'label',
                },
                {
                    label: '绑定字段名',
                    prop: 'prop',
                },
                {
                    label: '字段提示语',
                    prop: 'placeholder',
                },
                {
                    label: '表单后缀名',
                    prop: 'unit',
                },
            ],
            title: '新增字段',
            show: false,
            model: copy(model),
            addFields: [
                {
                    label: "表单域类型",
                    prop: 'type',
                    placeholder: '请选择',
                    type: 'select',
                    bindLabel: 'name',
                    bindValue: 'id',
                },
                {
                    label: "字段名称",
                    prop: 'label',
                    placeholder: '请选择',
                    type: 'select',
                    bindLabel: 'name',
                    bindValue: 'name',
                    filterable:true,
                },
                {
                    label: "绑定字段名",
                    prop: 'prop',
                    placeholder: '请输入',
                    type: 'input',
                    disabled: true,
                },

                {
                    label: "输入框提示语",
                    prop: 'placeholder',
                    placeholder: '请输入',
                    type: 'input',
                },
                {
                    label: "输入框后缀名",
                    prop: 'unit',
                    placeholder: '请输入',
                    type: 'input',
                },
                // {
                //     label: "表单校验提示语",
                //     prop: 'message',
                //     placeholder: '不填代表不校验',
                //     type: 'input',
                // },
                {
                    label: "排序",
                    prop: 'sort',
                    placeholder: '请输入',
                    type: 'number',
                },
            ],
            options: {
                type: [
                    {
                        name: '输入框',
                        id: 'input',
                        key:0,
                    },
                    {
                        name: '密码框',
                        id: 'password',
                        key:1,
                    },
                    {
                        name: '文本框',
                        id: 'textarea',
                        key:2,
                    },
                    {
                        name: '下拉框',
                        id: 'select',
                        key:3,
                    },
                    {
                        name: '日期选择器',
                        id: 'date',
                        key:5,
                    },
                    {
                        name: '单选框',
                        id: 'radio',
                        key:4,
                    },
                ],
                label: [],

            },
            rules: {
                type: [
                    { required: true, message: '请选择表单域类型', trigger: 'blur' },
                ],
                label: [
                    { required: true, message: '请选择表单名称', trigger: 'blur' },
                ],
                name: [
                    { required: true, message: '请输入表单名称', trigger: 'blur' },
                ],
                bindName:[
                { required: true, message: '请输入表单绑定值', trigger: 'blur' },
                { pattern: ENGLISH_REG, message: '不能输入特殊字符' } 
                ],
            },
            detailShow: false,
            index: 0,
            tableRecords:[],

        })
        onMounted(() => {
            methods.getData()
            tableRef.value.loading = false
            methods.getVal()
        })
        const tableRef = ref()
        const ruleFrom = ref()
        const addruleFrom = ref()
        const router = useRouter()
        const detailRuleFrom = ref()
        const route = useRoute()
        const methods = {
            getVal() {
                formGet({ id: route.query.id! as string }).then((res: any) => {
                    data.values.id = res.id
                    data.values.name = res.name
                    data.values.status = String(res.status)
                    data.values.tagName=res.tagName
                    data.values.subTitle=res.subTitle
                    data.values.bindName=res.bindName
                    data.values.category=res.category
                    if(res.category==1){
                    data.fields[3].disabled=true
                    }
                    let formStruct ={
                        formFields:[]
                    }
                   if(res.formStruct!='null'&&res.formStruct!='{}'){
                   data.values.formStruct=formStruct = JSON.parse(res.formStruct)
                   }
                   formStruct.formFields.map((item:any)=>{
                      item.isEdit=true
                   })
                   res.fields.map((item:any)=>{
                    item.label=item.name
                    item.prop=item.bindName
                    data.options.type.map((item1:any)=>{
                 if(item.type==item1.key){
                  item.type=item1.id
                 }
                    })
                   })
                data.tableRecords=formStruct.formFields.concat(res.fields)
                   console.log(formStruct); 
                   
                })
            },
            getData() {
                fieldList({}).then((res:any)=>{
                    data.options.label = res
                })
            },
            addField() {
                data.title = '新增字段'
                data.show = true
            },
            back(){
                ElMessageBox.confirm(
                    '当前信息将不再保存?',
                    '提示',
                    {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                    }
                )
                    .then(() => {
                        router.go(-1)
                    })
            },
            //关闭弹窗
            handleClose() {
                ElMessageBox.confirm(
                    '当前信息将不再保存?',
                    '提示',
                    {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                    }
                )
                    .then(() => {
                        addruleFrom.value.resetFields()//重置表单
                        data.show = false
                        data.model = copy(model)
                    })
            },
            //根据选择字段名称自动回显字段绑定值
            handleSelect(e: string) {
                if (e == 'label') {
                    data.options.label.map((item: any) => {
                        if (item.name == data.model.label) {
                            data.model.prop = item.bindName
                            data.model.id=item.id
                        }
                    })
                }
            },
            //根据添加字段生成list回显到列表中
            save() {
                
                addruleFrom.value.verification().then(() => {
                    if (data.title == '新增字段') {
                        data.values.formStruct.formFields.push(data.model)
                        data.tableRecords.push(data.model)
                        data.values.formStruct.formModel[data.model.prop] = null
                        // if (data.model.message) {
                        //     let rule = [{ required: true, message: data.model.message, trigger: ['blur', 'change'] },]
                        //     data.values.formStruct.formRules[data.model.prop] = rule
                        // }

                    } else {
                        data.values.formStruct.formFields[data.index] = data.model
                        data.tableRecords[data.index]=data.model
                        // if (data.model.message) {
                        //     let rule = [{ required: true, message: data.model.message, trigger: ['blur', 'change'] },]
                        //     data.values.formStruct.formRules[data.model.prop] = rule
                        // }
                    }
                    data.show = false
                    data.model = copy(model)
                    data.values.formStruct.formFields = data.values.formStruct.formFields.sort((a: any, b: any) => a.sort - b.sort)

                })
            },
            //编辑小表单
            saveForm() {
                ruleFrom.value.verification().then(() => {
                    formMod(data.values).then(() => {
                        Message({ type: 'success', message: '编辑成功' })
                        router.push('/system/flowPath/childForm/index')
                        if(addruleFrom.value){
                                addruleFrom.value.resetFields()
                            }
                    })

                })
            },
            //编辑当前字段
            edit(row: any, index: number) {
                data.index = index
                data.model = copy(row)
                data.title = "编辑字段"
                data.show = true
            },
            //删除当前字段
            deleteOut(row: any, index: number) {
                data.values.formStruct.formFields.splice(index, 1)
                data.tableRecords.splice(index, 1)
                delete data.values.formStruct.formModel[row.prop]
                // if (data.values.formStruct.formRules[row.prop]) {
                //     delete data.values.formStruct.formRules[row.prop]
                // }
            },
            //查看当前表单样式
            detail() {
                if (data.values.formStruct.formFields.length == 0) return
                let arr = data.values.formStruct.formFields.filter((item: any) => {
                    return item.type == 'select'
                })
                let ids = arr.map((item: any) => {
                    return item.prop
                })
                if (ids.length > 0) {
                    listByParentArr({ ids: ids }).then((res: any) => {
                        arr.map((item: any) => {
                            data.options[item.prop] = res[item.prop]
                        })

                        data.detailShow = true
                        detailRuleFrom.value.resetFields()
                    })
                } else {
                    data.detailShow = true
                }

            },
            //关闭表单查看界面
            detailHandleClose() {
                data.detailShow = false
            }

        }
        return {
            ...toRefs(data),
            ...methods, tableRef, Search, Plus,
            ruleFrom, addruleFrom, View, detailRuleFrom
        }
    }
})
</script>
<style scoped lang='scss'>
.mytable {
    overflow-y: auto;
    width: calc(100% - 64px);
    background: #fff;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    padding: 24px 32px;
    height: calc(100% - 60px);
    position: relative;
}

.button {
    position: absolute;
    right: 20px;
}
</style>
<style lang="scss">
.childForm {
   height: calc(100% - 70px);
   overflow-y: auto;
    .el-input,
    .el-select {
        width: 100% !important;
    }
}

.detailForm {
    .el-form-item {
        width: 44% !important;
    }

    .el-form-item__content {
        width: calc(100% - 120px);
    }

    .el-input,
    .el-select {
        width: 100% !important;
    }
}
</style>